<template>
    <div>
        <div class="mall-order">
          <list-top></list-top>
            <div class="mall-mains-opinion">
                <div class="w1200">
                         <div class="headTitle borderBottom">
                            <span class="active">意见反馈</span>
                         </div>
                    <div class="mall-mains-opinion-main">
                        <div class="mall-mains-opinion-main-t clear">
                            <ul class="clear">
                                <li>
                                    <span class="active">投诉</span>
                                </li>
                                <li>
                                    <span>建议</span>
                                </li>
                            </ul>
                        </div>
                        <div class="mall-mains-opinion-main-m">
                            <div class="clear opinion1">
                                <div class="fl opinion1-l">
                                    <span>*</span>投诉类型：
                                </div>
                                <div class="fl opinion1-r">
                                    <el-select v-model="value">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div class="clear opinion2">
                                <div class="fl opinion1-l">
                                    <span> </span>联系电话：
                                </div>
                                <div class="fl opinion1-r">
                                    <el-input v-model="phone" placeholder="请输入您的电话，方便我们联系您！"></el-input>
                                </div>
                            </div>
                            <div class="clear opinion3">
                                <div class="fl opinion1-l">
                                    <span>*</span>具体问题：
                                </div>
                                <div class="fl opinion1-r">
                                    <textarea v-model="question" maxlength="400" @focus="question1()"  @blur="question2()"></textarea>
                                    <p>字数限制200字以内</p>
                                </div>
                            </div>
                            <div class="mall-mains-opinion-add">
                                <div>
                                    <span>确认提交</span>
                                    <span>取消</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mall-mains-bottoms">
                <div class="w1200">
                    <div>京公网安备 11000002000088号|京ICP证070359号|互联网药品信息服务资格证编号(京)-经营性-2014-0008|新出发京零 字第大120007号</div>
                    <div>互联网出版许可证编号新出网证(京)字150号|出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号|违法和不良信息举报电话：4006561155</div>
                    <div>Copyright © 2004 - 2018 京东JD.com 版权所有|消费者维权热线：4006067733经营证照</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import listTop from "./public/listTop.vue";
export default {
    components:{
        listTop
    },
  data() {
    return {
      search: "", //搜索词
      phone: "",
      value: "",
      question: "请输入您的问题",
      options: [
        {
          value: "药品问题",
          label: "药品问题"
        },
        {
          value: "订单问题",
          label: "订单问题"
        },
        {
          value: "客服",
          label: "客服"
        },
        {
          value: "用户体验",
          label: "用户体验"
        },
        {
          value: "医药公司",
          label: "医药公司"
        },
        {
          value: "采购意愿单",
          label: "采购意愿单"
        },
        {
          value: "其他",
          label: "其他"
        }
      ]
    };
  },
  methods: {
    searchs() {
      // 点击搜索
    },
    question1(){
        if(this.question=='请输入您的问题'){
            this.question='';
        }
    },
    question2(){
        if(this.question==''){
            this.question='请输入您的问题'
        }
    }
  }
};
</script>

<style lang="less">
@import "css/main.less";
</style>

